<app-back-button></app-back-button>
<ng-container *ngIf="variants$ | async as productVariants">
  <app-image-slider
    [sliders]="productVariants[selectedIndex].productVariantImages"
    [sliderHeight]="'22rem'"
    [intervalBySeconds]="0"
  >
  </app-image-slider>
  <div class="price-section">
    <div class="now-price">
      {{productVariants[selectedIndex].price | currency: 'CNY'}}
    </div>
    <div class="list-price">
      {{productVariants[selectedIndex].listPrice | currency: 'CNY'}}
    </div>
    <div class="sales-count">
      {{productVariants[selectedIndex].product.priceDesc}}
    </div>
    <div class="title">
      {{productVariants[selectedIndex].name}}
    </div>
    <div class="coupon">
      <span appTag
            [tagBgColor]="'#e02f29'"
            [tagColor]="'#fff'"
            [tagSize]="'1rem'"
            [tagPadding]="'2px 10px'"
            [tagRadius]="'5px'"
      >返现</span>
      <span>店铺内消费满39元减2元</span>
    </div>
    <div class="guarantee">
      <span>全场包邮</span>
      <span>•</span>
      <span>7天退换</span>
      <span>•</span>
      <span>48小时发货</span>
      <span>•</span>
      <span>假一赔十</span>
    </div>
    <app-group-short-list class="group-short-list"></app-group-short-list>
  </div>
  <div class="toolbar">
    <div class="icon-button">
      <img src="/assets/icons/more.png" alt="">
      <div>更多</div>
    </div>
    <div class="icon-button">
      <img src="/assets/icons/favorite.png" alt=""/>
      <div>收藏</div>
    </div>
    <div class="icon-button">
      <img src="/assets/icons/customer-service.png" alt=""/>
      <div>客服</div>
    </div>
    <div class="direct-buy" (click)="handleDirectBuy(productVariants)">
      <div>
        {{productVariants[selectedIndex].listPrice | currency: 'CNY'}}
      </div>
      <div>直接购买</div>
    </div>
    <div class="group-buy" (click)="handleGroupBuy(productVariants)">
      <div>
        {{productVariants[selectedIndex].price | currency: 'CNY'}}
      </div>
      <div>发起拼单</div>
    </div>
  </div>
</ng-container>
